<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户登录-蜗牛短视频分享平台</title>
    <link rel="stylesheet" th:href="@{/css/index.css}" />
    <link rel="stylesheet" th:href="@{/css/login.css}" />
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2098488_hqzg0si39mm.css" type="text/css">
    <script type="application/javascript" th:src="@{/js/jquery-3.5.1.js}"></script>
    <script>
        $(document).ready(function () {
            $("#reg").click(function () {
                window.location.href = "/toReg"
            })
            $("#myForm").submit(function () {
               var password= $("#password").val()
               var username=$("#username").val()
                if (username.length==0){
                    $("#ErrorMessage").html("用户名不能为空")
                    return false
                }
                if (username.length<5||username.length>8){
                    $("#ErrorMessage").html("用户名必须为5-8个字符")
                    return false
                }
                $("#ErrorMessage").html("")
                if (password.length==0){
                    $("#ErrorPassword").html("用户名不能为空")
                    return false
                }
                if (password.length<6||password.length>12){
                    $("#ErrorPassword").html("用户名必须为6-12个字符")
                    return false
                }
                $("#ErrorPassword").html("")
            })
        })
    </script>
</head>
<body>
<div
        class="v3-app-layout layoutstatus-header--Normal layoutstatus-side--Hidden limitWidth header-theme--Dark">
    <div th:replace="header :: #header"></div>
    <div class="Dialog-container login-dialog-container" style="display: block;">
        <div class="Dialog__wrap">
            <div class="LoginDialog__container">
                <div class="LoginDialog__header">
                    <div class="title">登录</div>
                </div>
                <div id="BD_Login_Form" class="LoginDialog__content">
                    <div class="ssosdk-container sso-xigua code_login" id="sso_container" data-pagetype="code_login">
                        <div class="page-main">
                            <div class="content-main content-main-modal">
                                <form id="myForm" action="/user/login" method="post" class="form-main">
                                    <div class="form-input ">
                                        <div class="input-container"><input id="username" th:value="${username}==null?'':${username}" name="username" type="tel"
                                                                            class="form-input-main" placeholder="请输入账号" autocomplete="on" value="">
                                        </div>
                                        <div id="ErrorMessage" style="color: red"></div>
                                    </div>
                                    <div class="form-input form-input-last"><input name="password" type="password"
                                                                                   class="form-input-main" placeholder="请输入密码" id="password" autocomplete="off"
                                                                                   value=""></div>
                                    <div th:text="${msg}" id="ErrorPassword" style="color: red"></div>
                                    <div class="error-tips show-tips"></div><button id="sso_submit"
                                                                                    class="form-button btn-active"
                                                                                    style="background-color: rgb(248, 89, 89); cursor: pointer;">登录</button>
                                    <div class="error-tips show-tips"></div><button id="reg" type="button"
                                                                                    class="form-button btn-active"
                                                                                    style="background-color: rgb(248, 89, 89); cursor: pointer;">注册</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>